<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  #ti div{
    display: inline-block;
    width: 200px;
    height: 100px;
    line-height: 100px;
    margin: 0px 20px;
    text-align: center;
  }
  #main{
    width: 1000px;
    height: 500px;
  }

  .cp{
    background-color: pink;
  }
  .cb{
    background-color: rgb(96, 144, 172);
  }
  .an{
    width: 1000px;
    margin: 0 auto;
  }
</style>
<body>
<div class="an">
  <div id="ti">
    <div title="我是体育模块" >体育</div>
    <div title="我是新闻模块" >新闻</div>
    <div title="我是娱乐模块" >娱乐</div>
    <div title="我是综合模块" >综合</div>
  </div>
  <div id="main">请选择模块</div>
</div>
  <script>
    var ti = document.querySelectorAll("#ti div");
    console.dir(ti)
    var main = document.getElementById("main");
    for (let index = 0; index < ti.length; index++) {
      ti[index].classList.add("cp")
    };
    main.style.backgroundColor = "rgb(96, 144, 172)";
    for (let index1 = 0; index1 < ti.length; index1++) {
      ti[index1].onmouseover = function () {
        for (let index2 = 0; index2 < ti.length; index2++) {
          ti[index2].classList.remove("cb");
          main.innerText = " "
        }
        console.log(this)
        this.classList.add("cb");
        main.innerText = this.title;
      }
    }
  </script>
</body>
</html>